<template>
  <div class="about_index">
    <div class="about_item">
      <img src="@/assets/img/resolve/bg.png" class="banner_bg" />
      <div class="about_center">
        <div class="about_left">
          <div class="about_title">解决方案</div>
          <div class="about_content">面向丰富的业务场景,提供智能制造、工业大数据和网信安全等解决方案</div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="center">
        <div class="title">解决方案</div>
        <div class="resolve_items">
          <div class="resolve" v-for="(item,index) in list" :key="index">
            <img class="resolve_item_bg" :src="item.bg"/>
            <div class="desc">
              <div class="desc_title">{{item.title}}</div>
              <div class="desc_content">{{item.content}}</div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        list:[
            { title:'SMT行业解决方案', content:'将贴片机等生产设备接入到平台，对贴片机的温度等工艺参数进行即时管控，提升产品质量，并通过条码系统有效进行批次管理与质量跟踪追溯，整体提升产品质量及生产管理能力,降低报废率、节省生产和管理成本。', bg:require('../../assets/img/solution/fa1.png') },
            { title:'数字零售解决方案', content:'将自动售货机的运行状态及相关销售及客户数据实时采集，同过平台将物品的生产、销售、物流以及质保等信息准确及时反馈给客户，增加客户粘性；通过对各机器的状态、存货、销售以及财务信息进行分析，提高运营效率，满足运营商实时管理的需要，发展现代新零售。',bg:require('@/assets/img/solution/fa2.png')},
            { title:'智慧园区解决方案', content:'通过对园区物理空间进行虚拟建模，实现园区空间集中可视化，将园区能源、摄像头、路灯等设备接入到平台，对园区进行整体的监控管理对园区访问流量有效分析，车位车库有效管理，实现路灯及空调等能源设备高效利用，提高园区资源利用率，为园区运营及安全提供支持与保障。',bg:require('@/assets/img/solution/fa3.png')},
            { title:'能源管理解决方案', content:'针对工业企业、轨道交通、数据中心、大型商业综合体、政府公 建等大型用电客户构建的一套用能解决方案。该方案包括水、电、 气、热等多种能源，以能源购入、能源存储、能源消耗等能源使用 过程为导向的全生命周期用能管理方案，竭力帮助用户减少能源损 耗，提高能源利用率。',bg:require('@/assets/img/solution/fa4.png')},
            { title:'智慧工地解决方案', content:'打造物联网和云平台下的智慧工地建设，通过传感装置采集工地设备信息，并通过大数据建模和分析，对施工过程进行分析诊断，形成施工过程管理追溯的质量管理功能和实施过程的动态监控管理。',bg:require('@/assets/img/solution/fa5.png')},
            { title:'个性化定制解决方案', content:'通过服装定制、3D打印等智能化技术，以数字模型为基础等手段，为数据信息建模，并通过个人参数不同进行实时调整，打造满足不同个性化需求的智能产品，满足企业个人日益增加的个性化需求。',bg:require('@/assets/img/solution/fa6.png')},
            { title:'环境监控解决方案', content:'对生产车间的温度、湿度、PM2.5、PM1.6/甲醛等车间环境进行严格控制，通过平台将车间内各类传感器的数据进行实时采集与监控，通过平台进行可视化实时监看、预警与调控，保障生产环境的稳定性，进一步对生产质量进行保障。',bg:require('@/assets/img/solution/fa7.png')},
            { title:'金融设备远程运维解决方案', content:'将打印机、激光打印机、ATM机、摄像头等金融设备数据上传到平台，通过平台对设备进行管控与数据展示，通过大数据分析对设备故障进行有效预防和精准定位运维，提升运维效率，降低运维成本，提升客户满意度。',bg:require('@/assets/img/solution/fa8.png')},
            { title:'机加工数控机床解决方案', content:'某数控机床实训示范车间将其数控机床接入平台，收集实训生产加工参数、质量与数量，通过数据分析对实训成绩进行考核与评比。使学员考核可量化、有记录、有依据，提升实训车间的整体智能化管理水平。',bg:require('@/assets/img/solution/fa9.png')},
            { title:'注塑行业解决方案', content:'通过对注塑机及相关生产设备的数据进行实时采集，对生产工艺参数及生产过程进行实时监控与反馈，并通过条码系统进行有效追溯，加强企业生产工艺及质量管控，有效提升产品质量与生产管理水平，提升设备利用率和管理水平。',bg:require('@/assets/img/solution/fa10.png')},
            { title:'高空作业车行业解决方案', content:'通过对高空作业车增加GPS模块将设备数据上传到平台，对设备进行远程调试与管控，并通过大数据分析，有效预测与定位设备故障，降低设备运维成本，并对设备进行不断改良，提升产品质量。',bg:require('@/assets/img/solution/fa11.png')},
            { title:'半导体行业解决方案', content:'通过对半导体企业的工艺流程管理、设备管理、在制品管理、和统计分析，及时调整半导体生产企业生产计划、有效监控半导体生产企业产品制造流程、提升半导体生产企业整体运营水平。',bg:require('@/assets/img/solution/fa12.png')},
            { title:'旋挖钻机远程监控解决方案', content:'通过在旋挖机上安装GPS终端，将旋挖钻机的工况数据向平台上转移，并形成行业应用APP，打造旋挖钻专业解决方案，供第三方接入与应用。',bg:require('@/assets/img/solution/fa13.png')},
            { title:'雷达监控管理解决方案', content:'将雷达监测到的数据及雷达自身的健康运行数据采集到系统，并通过大数据分析对异常进行识别及预警，并将相关预警消息推送给相应的管理人员，使雷达监控数据实时可视化与及时处理，同时保障雷达设备高效健康运行。',bg:require('@/assets/img/solution/fa14.png')},
            { title:'砂浆机行业解决方案', content:'将砂浆机液压与控制系统及设备工况数据进行采集和上传，通过系统进行数据展现和大数据分析，实现智能生产与管理，并对设备进行故障预测与远程运维，形成砂浆机行业解决方案，直接供第三方接入与应用。',bg:require('@/assets/img/solution/fa15.png')},
            { title:'智慧水务解决方案', content:'从水源地、泵站、水厂、供水管网到末端用水户的全程监管，并通过数据整合，把握各环节水生命周期，实现包含水质在线监测、视频监控、工艺监控、数据分析、运营管理等功能，可实时掌握水质情况',bg:require('@/assets/img/solution/fa16.png')},
        ]
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.resolve_items {
  width: 100%;
//   background-color: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .resolve {
    width: 30%;
    // background-color: #ccc;
    height: 180px;
    position: relative;
    overflow: hidden;
    margin-bottom: 80px;
    cursor: pointer;
    .resolve_item_bg{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
    }
    .desc {
      padding: 16px 20px;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 126px;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      transition: all 0.4s;
      .desc_title {
        margin-bottom: 16px;
      }
      .desc_content{
          font-size: 14px;
      }
    }
    &:hover .desc {
      top: 0;
    }
  
  }
}
.banner_bg {
  width: 100%;
  height: 560px;
  position: absolute;
  left: 0;
  top: 0;
}
.about_item {
  color: #fff;
  height: 560px;
  .about_center {
    position: absolute;
    height: 560px;
    left: 50%;
    top: 0;
    width: 1600px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    max-width: 1330px;
    // justify-content: center;
    .about_left {
      max-width: 1330px;
      display: flex;
      flex-direction: column;
      .about_title {
        color: #fff;
        font-size: 60px;
        margin-bottom: 20px;
      }
      .about_content {
        max-width: 980px;
        color: #fff;
        font-size: 30px;
        line-height: 50px;
        font-weight: 300;
        margin-top: 10px;
      }
    }
  }
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.section1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fbff;
}
.section2 {
  background: url("../../assets/img/contect.png");
  margin-top: -20px;
  text-align: center;
  width: 100%;
  height: 80px;
}
.center {
  width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}
.title {
  color: #333;
  margin: 0 0 60px;
  font-size: 28px;
  font-weight: 300;
}
p {
  margin-top: 10px;
  line-height: 30px;
  text-align: left;
}

.synopsisImg {
  width: 1280px;
}
.honour_box {
  display: flex;
  margin: 10px 0;
  justify-content: center;
  width: 100%;
  .honour_card {
    width: 44%;
    height: 450px;
    background: #fff;
    margin: 10px 20px;
    border: 1px solid #0068f7;
    .honour_up {
      width: 100%;
      text-align: center;
      .honour_img {
        padding: 10px 0 5px 0;
      }
      .honour_title {
        font-size: 18px;
        margin: 0;
      }
    }
    .honour_down {
      width: 90%;
      margin: 0 5%;
      padding: 10px 0 10px 0;
      text-align: left;
    }
  }
}
.honor_details {
  line-height: 15px;
}
.au_but {
  margin: 25px;
  background: linear-gradient(0deg, #1361fb, #5670b2);
  border: 0;
  color: #fff;
}
.au_but:hover {
  background: #40a9ff;
  border: 0;
}
</style>